<template>
    <div class="detail-container" :class="{ 'has-privacy-tip': showPrivacyTip }">
        <!-- 手机状态栏 -->
        <div class="phone-header">
            <img src="~/assets/phone_header.jpg" alt="手机状态栏" class="phone-header-img" />
        </div>
        
        <!-- 顶部导航 -->
        <div class="nav-header">
            <div class="back-btn" @click="goBack">
                <i class="nav-icon"></i>
            </div>
            <div class="page-title">订单详情</div>
        </div>

        <!-- 隐私提示 -->
        <div v-if="showPrivacyTip" class="privacy-tip privacy-tip-fixed">
            <div class="tip-left">
                <Icon name="el-icon-InfoFilled" size="16" color="#1296db" />
                <span>请使用隐私号联系消费者</span>
            </div>
            <div class="tip-right">
                <button class="detail-btn">查看详情</button>
            </div>
        </div>

        <!-- 订单状态 -->
        <div class="status-block">
            <div class="status-content">
                <div class="status-icon-wrapper">
                    <img v-if="orderDetail.order_status === '待付款'" src="~/assets/pay.png" class="status-icon" alt="pay" />
                    <img v-if="orderDetail.order_status === '待发货'" src="~/assets/Arrived.png" class="status-icon" alt="arrived" />
                    <img v-if="['待收货', '已收货'].includes(orderDetail.order_status)" src="~/assets/ok.png" class="status-icon" alt="ok" />
                </div>
                <span class="status-text">{{ orderDetail.order_status }}</span>
            </div>
        </div>

        <!-- 物流信息 -->
        <div class="info-block logistics-info">
            <div class="block-header logistics-header">
                <span class="block-title">物流信息</span>
                <button class="add-package">新增额外包裹</button>
            </div>
            <div class="tracking-info">
                <div class="tracking-number">
                    <div class="delivery-icon-wrapper">
                        <img src="~/assets/car.png" class="delivery-icon" alt="delivery" />
                    </div>
                    <div class="tracking-text">
                        <span class="courier">{{ orderDetail.wul_name }}</span>
                        <span class="number">{{ orderDetail.wul_no }}</span>
                    </div>
                    <button class="copy-btn" @click="copyText(orderDetail.wul_no)">复制</button>
                </div>
                <div class="delivery-status">
                    <div class="status-dot"><i class="icon"></i></div>
                    <div class="status-info">
                        <div class="status-text">{{ orderDetail.wul_status }}</div>
                        <div class="status-time">{{ orderDetail.wul_time }}</div>
                    </div>
                    <i class="arrow-right"></i>
                </div>
            </div>
        </div>

        <!-- 收货信息 -->
        <div class="info-block receiver-info">
            <div class="block-header receiver-header">
                <span class="block-title">收货信息</span>
                <div class="action-buttons">
                    <button class="view-btn">查看姓名地址</button>
                    <button class="view-btn">查看手机号</button>
                </div>
            </div>
            <div class="divider"></div>
            <div class="receiver-details">
                <div class="info-content">
                    <div class="info-row">
                        <span class="name">{{ orderDetail.shouh_name }}</span>
                    </div>
                    <div class="info-row">
                        <span class="phone">{{ orderDetail.shouh_phone }}</span>
                    </div>
                    <div class="info-row">
                        <span class="address">{{ orderDetail.shouh_address }}</span>
                    </div>
                </div>
            </div>
            <div class="copy-btn-wrapper">
                <button class="copy-btn" @click="copyAddress">拨打电话</button>
                <button class="copy-btn" @click="copyAddress">复制</button>
            </div>
        </div>

        <!-- 商家备注 -->
        <div class="info-block merchant-note">
            <div class="block-header">
                <div class="left-box">
                    <span class="block-title">商家备注 </span>
                    <span class="no-note">暂无备注</span>
                </div>

                <div class="note-right">
                    <a class="add-note">添加备注</a>
                </div>
            </div>
        </div>

        <!-- 商品信息 -->
        <div class="info-block product-info">
            <div class="block-header">
                <span class="block-title">商品信息</span>
            </div>
            <div class="contact-customer">
                <img src="~/assets/dialogue.png" class="message-icon" alt="message" />
                <span>联系消费者({{ maskName(orderDetail.shouh_name) }})</span>
            </div>
            <div class="product-item">
                <img class="product-image" :src="`${orderDetail.image}`" alt="商品图片" />
                <div class="product-details">
                    <div class="details-info">
                        <div class="info-box">
                            <div class="product-name">{{ orderDetail.goods_name }}</div>
                            <div :class="openDesc ? 'product-desc' : 'product-desc-hidden'">
                                {{ orderDetail.goods_sku }}
                            </div>
                        </div>
                        <div class="price-box">
                            <div class="price">¥{{ orderDetail.goods_price }}</div>
                            <div class="quantity">x{{ orderDetail.num }}</div>
                        </div>
                    </div>
                    <div class="collapse-section" v-if="orderDetail.goods_sku && orderDetail.goods_sku.length > 15">
                        <button class="collapse-btn" @click="openDesc = !openDesc">
                            {{ openDesc ? '收起' : '展开全部' }}<i :class="openDesc ? 'arrow-up' : 'arrow-down'"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="price-summary">
                <div class="price-row">
                    <span>商品总价</span>
                    <span style="margin-top: 2px;">¥{{ (orderDetail.goods_price * orderDetail.num).toFixed(2) }}</span>
                </div>
                <div class="price-row" v-if="orderDetail.youh_price">
                    <span>商品立减券</span>
                    <span class="discount">-¥{{ orderDetail.youh_price }}</span>
                </div>
                <div class="merchant-receipt">
                    <div class="receipt-text"></div>
                    <div class="receipt-amount">
                        <span>商家实收:</span>
                        <span class="amount">¥{{ calculateActualPrice }}</span>
                    </div>
                </div>
            </div>
            <!-- 打款 -->
            <div class="pay-box">
                <div class="pay-btn">小额打款</div>
            </div>
        </div>
        <!-- 行业及服务信息 -->
        <div class="industry-info">
            <div class="title">行业及服务信息</div>
            <div class="array"></div>
        </div>
        <div class="fixed-footer">
            <div class="btn-box">
                <div class="footer-btn">售后申诉</div>
            </div>
        </div>
        <div class="order-info">
            <div class="order-info-item">订单编号： {{ orderDetail.order_no }} <a href="javascript:;" class="info-btn">复制</a></div>
            <div class="order-info-item">商品快照：核对交易细节时，可作为判断依据 <a href="javascript:;" class="info-btn">查看</a></div>
            <div class="order-info-item">承诺发货时间：{{ orderDetail.cn_fah_time }}</div>
            <div class="order-info-item">下单时间：{{ orderDetail.xiad_time }}</div>
            <div class="order-info-item">付款时间：{{ orderDetail.fuk_time }}</div>
            <div class="order-info-item">成交时间：{{ orderDetail.chengj_time }}</div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import Icon from '/@/components/icon/index.vue'

export default {
    data() {
        return {
            orderDetail: {},
            openDesc: false,
            showPrivacyTip: true,
        }
    },
    computed: {
        calculateActualPrice() {
            const totalPrice = this.orderDetail.goods_price * this.orderDetail.num
            return (totalPrice - (this.orderDetail.youh_price || 0)).toFixed(2)
        },
    },
    methods: {
        goBack() {
            this.$router.go(-1)
        },
        async fetchOrderDetail() {
            try {
                const id = this.$route.query.id
                const response = await axios.get('http://tmp8.iiiii5.cn/api/Order/detail?server=1', {
                    params: { id },
                })
                if (response.data.code === 0) {
                    this.orderDetail = response.data.data
                }
            } catch (error) {
                console.error('获取订单详情失败', error)
            }
        },
        copyText(text) {
            if (!text) return
            navigator.clipboard
                .writeText(text)
                .then(() => {
                    this.$message.success('复制成功')
                })
                .catch(() => {
                    this.$message.error('复制失败')
                })
        },
        copyAddress() {
            const address = `${this.orderDetail.shouh_name}\n${this.orderDetail.shouh_phone}\n${this.orderDetail.shouh_address}`
            this.copyText(address)
        },
        closePrivacyTip() {
            this.showPrivacyTip = false
        },
        maskName(name) {
            if (!name) return ''
            // 将第二个及以后的字符替换为*
            if (name.length <= 1) return name
            return name[0] + '*'.repeat(name.length - 1)
        },
    }, 
    created() {
        this.fetchOrderDetail()
    },
}
</script>

<style scoped>
.detail-container {
    background: #f7f8fa;
    min-height: 100vh;
    padding-bottom: 52px;
    padding-top: 89px;
}

.phone-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 21;
    background: #fff;
}

.phone-header-img {
    width: 100%;
    height: auto;
    display: block;
}

.detail-container.has-privacy-tip {
    padding-top: 141px;
}

.nav-header {
    display: flex;
    align-items: center;
    height: 52px;
    background: #fff;
    position: fixed;
    top: 37px;
    left: 0;
    right: 0;
    padding: 0 15px;
    z-index: 20;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
}

.back-btn {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.nav-icon {
    border-left: 2px solid #333;
    border-bottom: 2px solid #333;
    width: 14px;
    height: 14px;
    display: inline-block;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    text-indent: -9999px;
}

.page-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
}

.privacy-tip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background: #f0f7ff;
    margin-bottom: 8px;
    border-radius: 0;
}

.privacy-tip-fixed {
    position: fixed;
    top: 89px;
    left: 0;
    right: 0;
    z-index: 19;
    margin-bottom: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.tip-left {
    display: flex;
    font-size: 16px;
    align-items: center;
    gap: 6px;
}

.info-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1296db;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

.tip-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.close-btn {
    background: transparent;
    border: none;
    padding: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    outline: none;
    position: relative;
    width: 28px;
    height: 28px;
}

.close-btn:hover {
    background-color: rgba(25, 137, 250, 0.1);
    transform: scale(1.1);
}

.close-btn:active {
    transform: scale(0.95);
    background-color: rgba(25, 137, 250, 0.2);
}

.tip-left {
    display: flex;
    align-items: center;
}

.info-icon {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1296db;
    color: #fff;
    text-align: center;
    line-height: 14px;
    margin-right: 6px;
    font-style: normal;
    font-size: 16px;
}

.detail-btn {
    color: #1296db;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid #1296db;
    padding: 4px 12px;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    position: relative;
    overflow: hidden;
}

.detail-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(25, 137, 250, 0.3);
}

.detail-btn:hover {
    background: #fff;
    color: #1296db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.detail-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.detail-btn:hover::before {
    left: 100%;
}

.info-block {
    background: #fff;
    margin-bottom: 8px;
}

.block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
}
.block-header .left-box {
    flex: 1;
}
.block-title {
    font-size: 18px;
    font-weight: 800;
    color: #333;
}

.logistics-header {
    border-bottom: 1px solid #f2f2f2;
}

.add-package {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-size: 14px;
    color: #333;
}

.tracking-info {
    padding: 12px 0 12px 15px;
}

.tracking-number {
    display: flex;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    position: relative;
    border-bottom: 1px solid #f2f2f2;
}

.delivery-icon-wrapper {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.delivery-icon {
    width: 100%;
    height: 100%;
}

.tracking-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    line-height: 1;
}

.copy-btn {
    position: absolute;
    right: 15px;
    padding: 3px 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    color: #666;
}

.courier {
    color: #333;
}

.number {
    color: #666;
}

.delivery-status {
    display: flex;
    align-items: center;
    position: relative;
    padding-right: 15px;
    padding-left: 30px;
}

.delivery-status .status-dot {
    width: 16px;
    position: absolute;
    top: 2px;
    left: 0;
    bottom: 0;
}
.delivery-status .status-dot .icon {
    display: block;
    width: 16px;
    height: 16px;
    background: url('../../assets/ok.png') no-repeat center center;
    background-size: 100% 100%;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

.delivery-status .status-dot::after {
    content: '';
    display: block;
    width: 1px;
    top: 0;
    bottom: 0;
    background: #eaecef;
    position: absolute;
    z-index: 0;
    margin-left: 7px;
}

.delivery-status .status-info {
    flex: 1;
    margin-right: 20px;
}
.delivery-status .status-text {
    font-size: 16px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-right: 10px;
    flex: 1;
}

.delivery-status .status-time {
    font-size: 16px;
    color: #bbb;
    margin-top: 4px;
}

.arrow-right {
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    width: 10px;
    height: 10px;
    display: inline-block;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.view-btn {
    padding: 3px 8px;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    color: #666;
    font-weight: normal;
}

.receiver-header {
    padding: 12px 15px;
}

.divider {
    height: 1px;
    background-color: #f2f2f2;
    margin: 0;
}

.receiver-info .divider {
    margin: 0;
}

.copy-btn-wrapper {
    padding: 15px 0;
    text-align: right;
    margin-right: 15px;
}

.receiver-info .copy-btn {
    position: static;
    transform: none;
    display: inline-block;
    margin: 0;
    padding: 3px 10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    color: #666;
    margin-left: 10px;
}

.receiver-details {
    padding: 15px 0;
    margin: 0 15px;
    position: relative;
    border-bottom: 1px solid #f2f2f2;
}

.info-content {
    flex: 1;
}

.info-row {
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.4;
    color: #333;
}

.info-row:last-child {
    margin-bottom: 0;
}

.note-right {
    display: flex;
    align-items: center;
    font-weight: normal;
}

.no-note {
    color: #999;
    font-size: 16px;
    margin-left: 10px;
}

.add-note {
    color: #1296db;
    font-size: 16px;
    text-decoration: none;
    margin-left: 10px;
}
.add-note::after {
    content: '';
    border-top: 1px solid #1296db;
    border-right: 1px solid #1296db;
    width: 10px;
    height: 10px;
    display: inline-block;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    margin-left: 4px;
}
.product-info {
    position: relative;
}

.product-info .block-header {
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
}

.contact-customer {
    position: absolute;
    right: 15px;
    top: 15px;
    display: flex;
    align-items: center;
    color: #1296db;
    font-size: 16px;
}

.message-icon {
    width: 19px;
    height: 19px;
    margin-right: 4px;
    margin-top: 1px;
}

.product-item {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
}

.product-image {
    width: 75px;
    height: 75px;
    object-fit: cover;
    margin-right: 12px;
    border-radius: 4px;
    flex-shrink: 0;
}

.product-details {
    flex: 1;
}
.product-details .details-info {
    display: flex;
    position: relative;
}
.product-details .info-box {
    flex: 1;
}

.product-name {
    font-size: 16px;
    line-height: 20px;
    color: #333;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-desc {
    font-size: 16px;
    color: #999;
    line-height: 17px;
}
.product-desc-hidden {
    font-size: 16px;
    color: #999;
    line-height: 17px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.price-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 12px;
}

.price-box .price {
    font-size: 16px;
    color: #333;
    margin-bottom: 6px;
}

.price-box .quantity {
    font-size: 18px;
    color: #999;
}

.collapse-section {
    text-align: left;
}

.collapse-btn {
    color: #1296db;
    font-size: 15px;
    background: transparent;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
}

.arrow-up {
    border-top: 1px solid #1296db;
    border-left: 1px solid #1296db;
    width: 10px;
    height: 10px;
    display: inline-block;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    margin-left: 6px;
    margin-top: 6px;
}
.arrow-down {
    border-bottom: 1px solid #1296db;
    border-right: 1px solid #1296db;
    width: 10px;
    height: 10px;
    display: inline-block;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    margin-left: 6px;
    margin-top: -2px;
}

.price-summary {
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
}

.price-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 16px;
    color: #666;
}

.discount {
    color: #ff4d4f;
}

.merchant-receipt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.receipt-text {
    font-size: 18px;
    color: #333;
}

.receipt-amount {
    display: flex;
    align-items: center;
    font-weight: bold;
    /* border-bottom: 1px solid #333; */
    padding-bottom: 2px;
    font-size: 18px;
}

.amount {
    color: #333;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 3px;
}

.arrow-down {
    color: #999;
    font-size: 16px;
    font-style: normal;
}

/* 订单状态样式 */
.status-block {
    width: 100%;
    padding: 15px;
    background: #fff;
    margin-bottom: 8px;
}

.status-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.status-icon-wrapper {
    margin-right: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.status-block .status-text {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
.pay-box {
    padding: 15px;
    background: #fff;
    margin-bottom: 8px;
    display: flex;
    justify-content: flex-end;
}
.pay-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-size: 16px;
    color: #333;
}
.fixed-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 52px;
    background: #fff;
    border-top: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 15px;
    z-index: 20;
}
.fixed-footer .footer-btn {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid #f23a30;
    border-radius: 4px;
    font-size: 16px;
    color: #f23a30;
}
.industry-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
    background: #fff;
    margin-bottom: 8px;
}
.industry-info .title {
    font-size: 16px;
    color: #666;
}
.industry-info .array {
    border-top: 1px solid #666;
    border-right: 1px solid #666;
    width: 10px;
    height: 10px;
    display: inline-block;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}
.order-info {
    padding: 15px;
    background: #fff;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.order-info .order-info-item {
    font-size: 15px;
    color: #888;
}
.order-info .order-info-item .info-btn {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    margin-left: 10px;
}
</style>
